<template>
    
        <!-- 添加模块 -->
        <div class="module-box">
          <!-- 一行三等分 -->
          <div style="flex:0 1 25%">
            <dv-border-box-13 style="width:100%;height:200px; text-align: center;">
              <h4 >商品销量排行榜</h4>
              <CapsuleChart />
            </dv-border-box-13>
            <dv-border-box-8 style="width:100%;height:200px;text-align: center;">
              <h4 >商品数量排行榜</h4>
              <CapsuleChart2 />
            </dv-border-box-8>
            <!-- <dv-border-box-8 style="width:100%;height:200px;">dv-border-box-8</dv-border-box-8> -->
          </div>
          <div style="flex:0 1 50%">
            <dv-border-box-7 style="width: 100%;height:400px;;">
              <ChinaMap />
            </dv-border-box-7>
          </div>
          <div style="flex:0 1 25%">
            <dv-border-box-9 :reverse="true" style="width:100%;height:200px;">
              <PerChart />
            </dv-border-box-9>
            <dv-border-box-8 style="width:100%;height:200px;">
              <PerChart2 />
            </dv-border-box-8>
            <!-- <dv-border-box-8 style="width:100%;height:200px;">dv-border-box-8</dv-border-box-8> -->
          </div>   
    </div>
    </template>

  
  <script>
    import ChinaMap from "./chart/mapChart.vue"
    import PerChart from "./chart/perChat.vue"
    import PerChart2 from "./chart/perChat2.vue"
    import CapsuleChart from './chart/capsuleChart.vue'
    import CapsuleChart2 from './chart/capsuleChart2.vue'

    export default {
    data() {
      return {
        
      }
    },
    components: {
        ChinaMap,
        PerChart,
        PerChart2,
        CapsuleChart,
        CapsuleChart2
        
    },
   
  };

  </script>
  
  <style >
 
    
  </style>